<template>
  <my-layout :tabbar-is-show="false" :is-absolute-body="false">
    <template #TopBackground>
      <my-top-background />
    </template>
    <template #Navbar>
      <view
        style="width: 100%; height: 100%; display: flex; align-items: center"
      >
        <image
          @click="goback()"
          :src="indexTabBarUrl.navigateBack"
          style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
        />
        <image
          :src="indexTabBarUrl.starFace"
          style="width: 50rpx; height: 50rpx"
        />
      </view>
    </template>
    <template #Body>
      <view style="display: flex; flex-direction: column; height: 100%">
        <image
          :src="indexTabBarUrl.ranking"
          style="
            width: 295rpx;
            height: 69rpx;
            margin-left: 36rpx;
            margin-top: 58rpx;
          "
        />
        <view
          style="
            font-size: 24rpx;
            color: #999;
            margin-left: 39rpx;
            margin-top: 23rpx;
          "
          >2023.03.20日获奖名单</view
        >
        <!--tab-->
        <view
          style="
            width: 678rpx;
            height: 93rpx;
            margin-top: 34rpx;
            align-self: center;
            display: flex;
          "
        >
          <!--点赞榜 tab-->
          <view
            @click="goodClick"
            style="
              width: 40%;
              font-size: 32rpx;
              color: #fbd632;
              font-weight: bold;
              display: flex;
              justify-content: center;
              align-items: center;
              align-self: flex-end;
              border-top-left-radius: 20rpx;
              background-color: #1f1f20;
              position: relative;
              z-index: 1;
            "
            :style="{
              height: tabIndex === 0 ? '93rpx' : '80rpx',
              backgroundColor: tabIndex === 0 ? activeColor : waitColor,
              color: tabIndex === 0 ? '#666' : '#FBD632',
              borderTopRightRadius: tabIndex === 0 ? '20rpx' : '0',
            }"
          >
            <view
              style="position: relative"
              :style="{ marginTop: tabIndex === 0 ? '13rpx' : '0rpx' }"
              >点赞榜</view
            >
            <view
              class="good-left"
              :style="{
                '--color': tabIndex === 0 ? activeColor : waitColor,
              }"
              style="
                --color: transparent;
                width: 40rpx;
                height: 40rpx;
                position: absolute;
                left: 0;
                top: 100%;
              "
            ></view>
            <view
              v-if="tabIndex === 0"
              style="
                position: absolute;
                height: 80rpx;
                width: 40rpx;
                right: -36rpx;
                bottom: 0;
              "
              :style="{ backgroundColor: activeColor }"
            ></view>
            <view
              v-if="tabIndex === 0"
              style="
                position: absolute;
                height: 80rpx;
                width: 40rpx;
                right: -45rpx;
                transform: skew(10deg);
                border-bottom-left-radius: 10rpx 50rpx;
                bottom: 0;
              "
              :style="{ backgroundColor: waitColor }"
            ></view>
          </view>
          <!--打赏榜 tab-->
          <view
            @click="moneyClick"
            style="
              width: 60%;
              font-size: 32rpx;
              font-weight: bold;
              display: flex;
              align-items: center;
              height: 100%;
              align-self: flex-end;
              position: relative;
              border-top-right-radius: 20rpx;
            "
            :style="{
              height: tabIndex === 1 ? '93rpx' : '80rpx',
              backgroundColor: tabIndex === 1 ? activeColor : waitColor,
              color: tabIndex === 1 ? '#666' : '#FBD632',
              borderTopLeftRadius: tabIndex === 1 ? '20rpx' : '0',
            }"
          >
            <view
              style="margin-left: 80rpx"
              :style="{
                marginTop: tabIndex === 1 ? '13rpx' : '0rpx',
              }"
              >打赏榜</view
            >
            <view
              v-if="tabIndex === 1"
              style="
                position: absolute;
                width: 40rpx;
                height: 80rpx;
                left: -36rpx;
                bottom: 0;
                z-index: 1;
              "
              :style="{ backgroundColor: activeColor }"
            ></view>
            <view
              v-if="tabIndex === 1"
              style="
                width: 40rpx;
                height: 80rpx;
                position: absolute;
                bottom: 0;
                left: -45rpx;
                z-index: 1;
                transform: skew(-10deg);
                border-bottom-right-radius: 10rpx 50rpx;
              "
              :style="{ backgroundColor: waitColor }"
            ></view>
          </view>
        </view>
        <!--下方区域-->
        <view
          style="
            width: 678rpx;
            flex: 1;
            min-height: 0;
            align-self: center;
            background-image: linear-gradient(180deg, green, white);
            padding: 24rpx;
            box-sizing: border-box;
          "
          :style="{
            backgroundImage: `linear-gradient(180deg, ${activeColor}, white);`,
          }"
        >
          <swiper
            :current="tabIndex"
            style="width: 100%; height: 100%"
            :vertical="false"
            :indicator-dots="false"
            @change="swiperChange"
          >
            <swiper-item>
              <scroll-view
                :scroll-y="true"
                enhanced
                :show-scrollbar="false"
                style="width: 100%; height: 100%"
              >
                <view
                  style="display: flex; flex-direction: column; row-gap: 70rpx"
                >
                  <view v-for="item of goodList" style="display: flex">
                    <image
                      :src="item.imageUrl"
                      style="width: 180rpx; height: 125rpx"
                    />
                    <view
                      style="
                        display: flex;
                        flex-direction: column;
                        margin-left: 28rpx;
                      "
                    >
                      <view
                        style="font-size: 30rpx; color: #333; line-height: 1"
                        >{{ item.title }}</view
                      >
                      <view
                        style="margin-top: 34rpx; font-size: 24rpx; color: #999"
                        >获奖用户 {{ item.userName }}</view
                      >
                      <view style="font-size: 24rpx; color: #999"
                        >奖品 {{ item.giftName }}</view
                      >
                    </view>
                  </view>
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view
                :scroll-y="true"
                enhanced
                :show-scrollbar="false"
                style="width: 100%; height: 100%"
              >
                <view
                  style="display: flex; flex-direction: column; row-gap: 70rpx"
                >
                  <view v-for="item of moneyList" style="display: flex">
                    <image
                      :src="item.imageUrl"
                      style="width: 180rpx; height: 125rpx"
                    />
                    <view
                      style="
                        display: flex;
                        flex-direction: column;
                        margin-left: 28rpx;
                      "
                    >
                      <view
                        style="font-size: 30rpx; color: #333; line-height: 1"
                        >{{ item.title }}</view
                      >
                      <view
                        style="margin-top: 34rpx; font-size: 24rpx; color: #999"
                        >获奖用户 {{ item.userName }}</view
                      >
                      <view style="font-size: 24rpx; color: #999"
                        >奖品 {{ item.giftName }}</view
                      >
                    </view>
                  </view>
                </view>
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </template>
  </my-layout>
</template>
<script>
import indexTabBarUrl from "@/url/index_tabBar";
class ListItem {
  constructor(
    title,
    userName,
    giftName,
    imageUrl = "https://llg.qiniu.comeinvip.com/FuzHseD6Keb1YPV3aRhZ6SwLdaYZ.png"
  ) {
    this.title = title;
    this.userName = userName;
    this.giftName = giftName;
    this.imageUrl = imageUrl;
  }
}
export default {
  name: "ranking",
  data() {
    return {
      indexTabBarUrl,
      tabIndex: 0,
      activeColor: "#f8fff1",
      waitColor: "#1F1F20",
      goodList: [
        new ListItem("乡村爱情第一部", "张三", "洗衣机一台"),
        new ListItem("白云黑土", "李四", "冰箱一台"),
        new ListItem("五周年大戏", "爱国", "带饭哈"),
        new ListItem("标题4", "东升更好", "规范环境"),
        new ListItem("标题5", "风格", "回复"),
        new ListItem("标题6", "法国红酒", "收到"),
        new ListItem("标题7", "即可", "回复光滑"),
      ],
      moneyList: [
        new ListItem("标题4", "东升更好", "规范环境"),
        new ListItem("标题5", "风格", "回复"),
        new ListItem("标题6", "法国红酒", "收到"),
        new ListItem("标题7", "即可", "回复光滑"),
        new ListItem("乡村爱情第一部", "张三", "洗衣机一台"),
        new ListItem("白云黑土", "李四", "冰箱一台"),
        new ListItem("五周年大戏", "爱国", "带饭哈"),
      ],
    };
  },
  methods: {
    swiperChange(event) {
      this.tabIndex = event.detail.current;
    },
    moneyClick() {
      this.tabIndex = 1;
    },
    goodClick() {
      this.tabIndex = 0;
    },
    goback() {
      uni.navigateBack();
    },
  },
};
</script>
<style lang="scss" scoped>
.good-left {
  background-image: radial-gradient(
    circle at 40rpx 40rpx,
    transparent 0rpx,
    transparent 40rpx,
    var(--color) 42rpx
  );
}
</style>
